<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <h:body>
        <ui:composition template="./WEB-INF/template.xhtml">
            <ui:define name="title">
                <h:outputText value="Registrate con nosotros | SUBWAY.com" />
            </ui:define>

            <ui:define name="content">


                <div id="content_inner">

                    <div class="content">
                        <div id="content_registro">

                            <p:panel header="¿Deseas registrarte?" styleClass="panel-usuario" style="width: 88%">
                                <p:growl id="growl" />

                                Bienvenido a Subway El Salvador! Use el siguiente formulario para 
                                crear una nueva cuenta y poder accesar a nuestro servicio de 
                                pedidos en línea y gozar de muchos más privilegios.
                                <div id="new-form">

                                    <p:fieldset legend="Registro de Usuarios" styleClass="panel-usuario" style="width: 80%">
                                        <h:form>
                                            <div id="registro">
                                                <div id="registro-form">
                                                    <h:panelGrid columns="2">
                                                        <h:outputLabel value="Usuario: *" for="usuario"/>
                                                        <p:inputText id="usuario" value="" required="true" requiredMessage="*Debe ingresar un usuario"/>
                                                        <h:outputLabel value="Correo Electrónico: *" for="email"/>
                                                        <p:inputText id="email" value="" required="true" requiredMessage="*Debe ingresar su correo electrónico"/>
                                                        <h:outputLabel value="Nombres: *" for="nombres"/>
                                                        <p:inputText id="nombres" value="" required="true" requiredMessage="*Debe ingresar cuando menos un nombre"/>
                                                        <h:outputLabel value="Apellidos: *" for="apellidos"/>
                                                        <p:inputText id="apellidos" value="" required="true" requiredMessage="*Debe ingresar cuando menos un apellido"/>
                                                        <h:outputLabel value="Teléfono 1: *" for="tel1"/>
                                                        <p:inputText id="tel1" value="" required="true" requiredMessage="*Debe ingresar cuando menos un teléfono"/>
                                                        <h:outputLabel value="Teléfono 2:" for="tel2"/>
                                                        <p:inputText id="tel2" value=""/>
                                                        <h:outputLabel value="Fecha de Nacimiento: *" for="fechaNac"/>
                                                        <p:inputMask mask="99/99/9999" id="fechaNac" value=""/>

                                                        <h:outputLabel value="Departamento, Municipio: *" for="ubicacion"/>
                                                        <p:selectOneMenu id="ubicacion" value="" required="true" requiredMessage="*El campo Departamento, Municipio es requerido ">
                                                            <f:selectItems value=""/>
                                                        </p:selectOneMenu>
                                                        <h:outputLabel value="Colonia: *" for="colonia"/>
                                                        <p:inputText id="colonia" value="" required="true" requiredMessage="*Debe ingresar la colonia"/>
                                                        <h:outputLabel value="Nº De Casa: *" for="casa"/>
                                                        <p:inputText id="casa" value="" required="true" requiredMessage="*Debe ingresar el Nº de Casa"/>
                                                        <h:outputLabel value="Contraseña: *" for="password"/>
                                                        <p:password id="usuarioPassword" value="" 
                                                                    required="true" requiredMessage="*Debe ingresar una contraseña" 
                                                                    weakLabel="Débil" match="password2" goodLabel="Segura" strongLabel="Fuerte" promptLabel="Ingrese una contraseña"/>
                                                        <h:outputLabel value="Contraseña (De Nuevo): *" for="password2"/>
                                                        <p:password id="password2" value="" 
                                                                    required="true" feedback="false" requiredMessage="*Debe ingresar de nuevo su contraseña"/>
                                                    </h:panelGrid>
                                                    <br/>

                                                </div><!-- end of registro -->
                                            </div><!-- registro-form -->
                                            <div id="terminos">
                                                <p:selectBooleanCheckbox value="1" required="true" />
                                                Estoy de acuerdo en que he creado una cuenta para hacer un adecuado uso del sitio 
                                                web y no hacer SPAM. También declaro haber leído los <a href="#">Términos de uso</a> 
                                                y la <a href="#">Política de privacidad</a>.<font color="red">*</font>
                                                <br/><p:commandButton value="Crear cuenta!" update="growl"/>
                                            </div>
                                        </h:form>
                                        <h:panelGroup id="messagePanel" layout="block">
                                            <h:outputText value="*Campos requeridos" style="color: red;margin-left: 80px"/>
                                            <p:messages autoUpdate="true"/>
                                        </h:panelGroup>
                                    </p:fieldset>
                                </div><!-- end of new-form -->
                            </p:panel>
                        </div>
                    </div><!-- end of content -->
                </div><!-- end of content_inner -->

            </ui:define>
        </ui:composition>

    </h:body>
</html>
